import {FlatList, RefreshControl, ScrollView, StyleSheet, TouchableOpacity, View} from "react-native";
import {Chip, Text, Icon} from "react-native-paper";
import {HorizontalCardList} from "../components/homeScreen/HorizontalCardList";
import {data} from "../assets/data";
import {useCallback, useState} from "react";
import {FilteredCardList} from "../components/homeScreen/FilteredCardList";
import {MainStackParamList} from "../navigation/MainStack";
import {DrawerActions} from "@react-navigation/native";
import {ScrollableBar} from "../components/homeScreen/ScrollableBar";
import {DrawerScreenProps} from "@react-navigation/drawer";

type props = DrawerScreenProps<MainStackParamList, "HomeScreen">;
export const HomeScreen = ({navigation, route}: props) => {
    const [search, setSearch] = useState<string>(``);
    const [refresh, setRefresh] = useState(false);

    const filterItem = (item: { id: number, title: string }) => {
        return <Chip mode={"flat"}
                     elevated={true}
                     style={{
                         backgroundColor: "#FFF",
                         marginLeft: 7
                     }} children={<TouchableOpacity children={<Text children={item.title}/>}/>}/>
    };

    const onRefresh = useCallback(() => {
        setRefresh(true);
        setTimeout(() => {
            setRefresh(false);
        }, 500)
    }, [])

    // todo - Exception!
    return (
        <ScrollView contentContainerStyle={style.container}
                    disableScrollViewPanResponder={true}
                    onScroll={e => {

                    }}
                    refreshControl={<RefreshControl refreshing={refresh} onRefresh={onRefresh}/>}>

            <View style={{
                flexDirection: `row`,
                alignItems: `center`,
                paddingTop: 8,
                paddingHorizontal: 14,
                gap: 12
            }}>
                <TouchableOpacity children={<Icon source={`menu`}
                                                  size={24}
                                                  color={`black`}/>}
                                  onPress={() => {
                                      navigation.dispatch(DrawerActions.openDrawer);
                                  }}
                                  style={{
                                      alignItems: `center`,
                                      padding: 10
                                  }}/>
                <Icon size={24}
                      color={`#EE7100`}
                      source={`car-estate`}/>
                <View>
                    <TouchableOpacity children={<Text children={`Доставка курьером`}
                                                      style={{
                                                          color: `#EE7100`
                                                      }}/>}
                                      style={{
                                          alignItems: `center`
                                      }}/>
                    <Text children={`ул. Миклухо-Маклая, 55, Москва`}/>
                </View>
            </View>

            <ScrollableBar search={search}
                           setSearch={setSearch}/>

            {/*<View style={{*/}
            {/*    flexDirection: `row`,*/}
            {/*    marginVertical: 8,*/}
            {/*    paddingHorizontal: 14,*/}
            {/*    height: 40,*/}
            {/*    justifyContent: "space-between"*/}
            {/*}}>*/}
            {/*    <Searchbar placeholder={`Поиск`}*/}
            {/*               elevation={1}*/}
            {/*               value={search}*/}
            {/*               onChangeText={text => setSearch(text)}*/}
            {/*               style={{*/}
            {/*                   width: `81%`,*/}
            {/*                   height: 40,*/}
            {/*                   backgroundColor: `#FFF`,*/}
            {/*               }}*/}
            {/*               inputStyle={{*/}
            {/*                   position: `relative`,*/}
            {/*                   bottom: 7,*/}
            {/*                   justifyContent: "center",*/}
            {/*                   alignItems: "center"*/}
            {/*               }}/>*/}
            {/*    /!*<TextInput placeholder={`Поиск`}*!/*/}
            {/*    /!*           value={search}*!/*/}
            {/*    /!*           inputMode={`text`}*!/*/}
            {/*    /!*           placeholderTextColor={`#BCBCBC`}*!/*/}
            {/*    /!*           cursorColor={`black`}*!/*/}
            {/*    /!*           underlineColorAndroid="transparent"*!/*/}
            {/*    /!*           onChangeText={text => setSearch(text)}*!/*/}
            {/*    /!*           style={{*!/*/}
            {/*    /!*               color: `black`,*!/*/}
            {/*    /!*               width: `70%`,*!/*/}
            {/*    /!*               height: 40,*!/*/}
            {/*    /!*               paddingHorizontal: 14,*!/*/}
            {/*    /!*               backgroundColor: `#FFF`,*!/*/}
            {/*    /!*               borderRadius: 18,*!/*/}
            {/*    /!*               elevation: 4}}/>*!/*/}
            {/*    <View children={<TouchableOpacity children={<Icon source={`tune-variant`}*/}
            {/*                                                      size={21}*/}
            {/*                                                      color={`black`}/>}/>}*/}
            {/*          style={{*/}
            {/*              backgroundColor: `#FFF`,*/}
            {/*              justifyContent: `center`,*/}
            {/*              alignItems: `center`,*/}
            {/*              borderRadius: 100,*/}
            {/*              padding: 10,*/}
            {/*              elevation: 4}}/>*/}
            {/*</View>*/}
            <View style={style.header}>
                <Text style={style.headerText}>ХИТЫ ПРОДАЖ</Text>
            </View>

            <ScrollView horizontal={false}>
                <HorizontalCardList products={data.products}/>
            </ScrollView>

            <View style={style.header}>
                <Text style={style.headerText}>КАТАЛОГ STIHL</Text>
            </View>

            <View>
                <FlatList data={data.filters}
                          horizontal={true}
                          contentContainerStyle={{
                              paddingVertical: 7,
                              paddingHorizontal: 4
                          }}
                          showsHorizontalScrollIndicator={false}
                          renderItem={(item) => filterItem(item.item)}/>
            </View>

            <View style={{flexDirection: "row"}}>
                {/*    todo - Filters*/}
            </View>

            <FilteredCardList filtered={data.filtered}/>
        </ScrollView>
    );
};

const style = StyleSheet.create({
    container: {
        flexGrow: 1,
        flexDirection: "column"
    },
    header: {
        height: 53,
        backgroundColor: "#EE7100",
        justifyContent: "center",
        alignItems: "center"
    },
    headerText: {
        color: "#FFF",
        fontWeight: "700",
        fontSize: 20
    }
});